<template>
  <div class="big-page">
    <page-header menu="CampusPlanning"></page-header>
    <div class="show-layout">
      <div class="pager pager-left" :class="{'hide': page===1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <common-image size="big" v-if="page===1" :index="0"></common-image>
          <common-image size="big" v-if="page===2" :index="1"></common-image>
          <common-image size="big" v-if="page===3" :index="2"></common-image>
          <common-image size="big" v-if="page===4" :index="3"></common-image>
          <common-image size="big" v-if="page===5" :index="4"></common-image>
          <common-image size="big" v-if="page===6" :index="5"></common-image>
        </div>
      </div>
      <div class="pager pager-right" :class="{'hide': page===6}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonImage from '@/views/pages/components/CommonImage'
export default {
  name: 'CampusPlanning',
  data () {
    return {
      page: 1,
      title: '校园规划',
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '4' },
        title: '已建总建筑面积（万平方米）',
        xAxis: [],
        series: [],
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '4' },
        title: '总用地规模（亩）',
        xAxis: [],
        series: [],
        legend: []
      },
      chart3: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '4' },
        title: '',
        xAxis: [],
        series: [],
        legend: []
      }
    }
  },
  components: {
    PageHeader,
    CommonImage
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '4' } })
    },
    init () {
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 6) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
